
<template>
  <CloudPopover
    style="width: 500px"
    title="Hover title"
    trigger="hover"
    :visible="hovered"
    @visibleChange="handleHoverChange"
  >
    <div slot="content">This is hover content.</div>
    <CloudPopover
      title="Click title"
      trigger="click"
      :visible="clicked"
      @visibleChange="handleClickChange"
    >
      <div slot="content">
        <div>This is click content.</div>
        <a @click="hide">Close</a>
      </div>
      <CloudButton>Hover and click / 悬停并单击</CloudButton>
    </CloudPopover>
  </CloudPopover>
</template>

<script>
  export default {
    title: '6.悬停点击弹出窗口 ',
    subTitle: '以下示例显示如何创建可悬停和单击的弹出窗口。',
    data () {
      return {
        clicked: false,
        hovered: false,
      }
    },
    methods: {
      hide () {
        this.clicked = false;
        this.hovered = false;
      },
      handleHoverChange (visible) {
        this.clicked = false;
        this.hovered = visible;
      },
      handleClickChange (visible) {
        this.clicked = visible;
        this.hovered = false;
      },
    }
  }
</script>

<style lang="scss">
</style>